<template>
  <view class="message-center">
    <!-- 顶部自定义导航栏 -->
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">消息中心</block>
    </cu-custom>

    <!-- 消息类型Tab -->
    <view class="msg-tabs">
      <view
        v-for="(item, idx) in tabs"
        :key="item"
        class="tab-item"
        :class="{ active: tabIndex === idx }"
        @tap="tabIndex = idx"
      >
        {{ item }}
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-box">
      <image class="empty-img" src="https://cdn.uviewui.com/uview/empty/data.png" mode="widthFix"></image>
      <view class="empty-text">什么内容都没有哦</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['全部', '系统消息', '时刻圈'],
      tabIndex: 0
    }
  }
}
</script>

<style lang="scss">
.message-center {
  min-height: 100vh;
  background: #fff;
  .msg-tabs {
    display: flex;
    align-items: center;
    height: 90rpx;
    background: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      color: #666;
      position: relative;
      padding: 0 10rpx;
      height: 90rpx;
      line-height: 90rpx;
      &.active {
        color: #2468f2;
        font-weight: bold;
        &::after {
          content: '';
          display: block;
          width: 60rpx;
          height: 6rpx;
          background: #2468f2;
          border-radius: 6rpx;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
      }
    }
  }
  .empty-box {
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .empty-img {
      width: 320rpx;
      margin-bottom: 32rpx;
    }
    .empty-text {
      color: #b0b0b0;
      font-size: 30rpx;
      margin-top: 10rpx;
    }
  }
}
</style> 